<template>
  <a-form layout="inline"  ref="formRef" >
    <a-form-item name="date-picker" label="">
      <a-range-picker v-model:value="formState.rangTime" show-time value-format="YYYY-MM-DD HH:mm:ss" class="w-96"/>
      <!--      <a-date-picker value-format="YYYY-MM-DD" placeholder="年/月/日" />-->
    </a-form-item>
    <a-form-item label="">
      <a-select ref="select" placeholder="请选择项目" allowClear v-model:value="formState.projectId"  @change="handleProjectChange" class="w-80">
        <a-select-option v-for="i in projects" :key="i.id" :value="i.id">{{i.name}}</a-select-option>
        <!--        <a-select-option value="a">项目a</a-select-option>-->
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select ref="select" placeholder="请选择DTU" allowClear v-model:value="formState.dtuId"  @change="handleDtuChange" class="w-80">
        <a-select-option v-for="i in dtus" :key="i.id" :value="i.id">{{i.name}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select ref="select" placeholder="请选择采集设备" allowClear v-model:value="formState.gatherDeviceId" @change="handleGatherDeviceChange" class="w-80">
        <a-select-option v-for="i in gatherDevices" :key="i.id" :value="i.id">{{i.name}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="">
      <a-select ref="select" placeholder="请选择通道" allowClear v-model:value="formState.sensorId" class="w-80">
        <a-select-option v-for="i in sensors" :key="i.id" :value="i.id">通道{{i.channel}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item class="">
      <a-button type="primary" @click="search"> 查询 </a-button>
      <a-button type="primary" class="mx-2"> 导出 </a-button>
      <a-button type="primary" @click="reset"> 删除 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';
export default {
  data() {
    return {
      formState: {
        rangTime:[],
        projectId: null,
        dtuId: null,
        gatherDeviceId: null,
        sensorId: null,
        pageIndex:1,
        pageSize:10,
        startDate:'',
        endDate:''
      },
      projects:[],
      dtus:[],
      gatherDevices:[],
      sensors:[]
    };
  },
  components:{
    message
  },
  methods: {
    reset(){
      // resetFields();
      this.formState.rangTime= [];
      this.formState.projectId= null;
      this.formState.dtuId= null;
      this.formState.gatherDeviceId= null;
      this.formState.sensorId= null;
    },
    setProjects(projects){
      this.projects = projects;
    },
    setDtu(projectId){
      defHttp
        .get({
          url: '/dtu/get-by-project-id',
          params: { projectId: projectId },
        })
        .then((res) => {
          this.dtus = res.data;
        });
    },
    handleProjectChange(val){
      this.$emit('project-change', val);
    },
    handleDtuChange(val){
      defHttp
        .get({
          url: '/gather-device/get-by-dtu-id',
          params: { dtuId: val },
        })
        .then((res) => {
          this.gatherDevices = res.data;
        });
    },
    handleGatherDeviceChange(val){
      defHttp
        .get({
          url: '/sensor/get-by-gather-device-id',
          params: { gatherDeviceId: val },
        })
        .then((res) => {
          this.sensors = res.data;
        });
    },
    search(){
      this.formState.pageIndex = 1;
      if( this.formState.rangTime.length==0){
        message.info("请输入时间范围!");
        return;
      }
      if(this.formState.projectId ==null){
        message.info("请选择对应项目!");
        return;
      }
      this.$emit('action', {
        startDate:this.formState.rangTime[0],
        endDate: this.formState.rangTime[1],
        pageIndex:this.formState.pageIndex,
        pageSize: this.formState.pageSize,
        projectId:this.formState.projectId,
        dtuId:this.formState.dtuId? this.formState.dtuId:0,
        gatherDeviceId:this.formState.gatherDeviceId?this.formState.gatherDeviceId:0,
        sensorId:this.formState.sensorId?this.formState.sensorId:0,
      });
    },
    tableChange(currentPage){
      console.log(this.formState.projectId);
      this.formState.pageIndex = currentPage;
      if( this.formState.rangTime.length==0){
        message.info("请输入时间范围!");
        return;
      }
      if(this.formState.projectId ==null){
        message.info("请选择对应项目!");
        return;
      }
      this.$emit('action', {
        startDate:this.formState.rangTime[0],
        endDate: this.formState.rangTime[1],
        pageIndex:this.formState.pageIndex,
        pageSize: this.formState.pageSize,
        projectId:this.formState.projectId,
        dtuId:this.formState.dtuId? this.formState.dtuId:0,
        gatherDeviceId:this.formState.gatherDeviceId?this.formState.gatherDeviceId:0,
        sensorId:this.formState.sensorId?this.formState.sensorId:0,
      });
    }
  }
};
</script>

<style>
</style>
